<template>
	<div class="couple-box">
		<van-field :value="formatedData['时间']" label-width="10em" type="text" autosize placeholder="" label="时间" disabled right-icon="arrow" />
		<van-field v-model="formatedData['地名']" label-width="10em" type="text" autosize placeholder="" label="地名" right-icon="arrow" />
		<van-field :value="formatedData['距离']" label-width="10em" type="number" autosize placeholder="" label="距离" disabled right-icon="arrow" />
		<van-field :value="formatedData['方位度']" label-width="10em" type="number" autosize placeholder="" label="方位度" disabled right-icon="arrow" />
		<van-field :value="formatedData['经度']" label-width="10em" type="text" autosize placeholder="" label="经度" disabled right-icon="arrow" />
		<van-field :value="formatedData['纬度']" label-width="10em" type="text" autosize placeholder="" label="纬度" disabled right-icon="arrow" />
		<van-field :value="formatedData['高程']" label-width="10em" type="text" autosize placeholder="" label="高程" disabled right-icon="arrow" />
		<van-field v-model="formatedData['强度(G)']" label-width="10em" type="text" autosize placeholder="" label="强度(G)" right-icon="arrow" />
		<van-field v-model="formatedData['强度(T)']" label-width="10em" type="text" autosize placeholder="" label="强度(T)" right-icon="arrow" />
		<van-field :value="formatedData['热点数']" label-width="10em" type="text" autosize placeholder="" label="热点数" disabled right-icon="arrow" />
		<van-field :value="formatedData['行政编码']" label-width="10em" type="text" autosize placeholder="" label="行政编码" disabled right-icon="arrow" />
		<van-field :value="formatedData['植被覆盖度(%)']" label-width="10em" type="text" autosize placeholder="" label="植被覆盖度(%)" disabled right-icon="arrow" />
		<van-field :value="formatedData['森林(%)']" label-width="10em" type="text" autosize placeholder="" label="森林(%)" disabled right-icon="arrow" />
		<van-field :value="formatedData['草地(%)']" label-width="10em" type="text" autosize placeholder="" label="草地(%)" disabled right-icon="arrow" />
		<van-field :value="formatedData['农田及自然植被(%)']" label-width="10em" type="text" autosize placeholder="" label="农田及自然植被(%)" disabled right-icon="arrow" />
		<van-field :value="formatedData['灌木(%)']" label-width="10em" type="text" autosize placeholder="" label="灌木(%)" disabled right-icon="arrow" />
		<van-field :value="formatedData['城市或荒漠(%)']" label-width="10em" type="text" autosize placeholder="" label="城市或荒漠(%)" disabled right-icon="arrow" />
		<van-field clickable label="植被类型" :value="formatedData['植被类型']" placeholder="请选择" @click="showVeg = true" right-icon="arrow" />
		<van-popup v-model="showVeg" round position="bottom">
			<van-picker show-toolbar :columns="columns" @cancel="showVeg = false" @confirm="onConfirm" />
		</van-popup>
		<div class="bottomBtn" @click="checkUpload" v-if="isPerson">上传</div>
		<div style="margin-top: 0.6rem; height: 0.4rem"></div>
	</div>
</template>
<script>
import { Dialog, Toast } from 'vant'
import { changeFireInfo } from '../../api/fire'
import { keyFormateBack, keyFormate } from '../../util/fireUtils'
import dd from 'gdt-jsapi'
export default {
	name: 'Report',
	data() {
		return {
			formatedData: {},
			showVeg: false,
			isPerson: false,
			columns: ['森林', '草地', '农田及自然植被', '灌木', '城市或荒漠']
		}
	},
	mounted() {
		document.title = '火情反馈'
		let datt = this.$route.query
		console.log(datt)
		if (datt.coupleData) {
			this.isPerson = datt.coupleData.isPerson == 'true' ? true : false
			this.formatedData = JSON.parse(datt.coupleData)
		}
	},
	methods: {
		onConfirm(value) {
			this.$set(this.formatedData, '植被类型', value)
			this.showVeg = false
		},
		checkUpload() {
			Dialog.confirm({
				title: '确认提交？',
				message: '提交后无法修改，确认提交请点击“确认”按钮',
				confirmButtonColor: '#2074D4'
			})
				.then(() => {
					this.upLoad()
				})
				.catch(() => {})
		},
		// 上传反馈信息
		upLoad() {
			console.log(this.formatedData)
			let params = keyFormateBack('fireDetailC', this.formatedData)
			console.log(params)
			changeFireInfo(params)
				.then((res) => {
					console.log(res)
					// this.detailData = res; // !!! 让上一级重新查找一下数据
					this.formatedData = keyFormate('fireDetailC', res)
					Toast.success('更改成功')
					setTimeout(() => {
						dd.goBack()
							.then((res) => {
								console.log(res)
							})
							.catch((err) => {
								console.log(err)
							})
					}, 1000)
				})
				.catch((err) => {
					console.log(err)
				})
		}
	}
}
</script>
<style >
.couple-box .van-dropdown-menu__bar {
	box-shadow: none;
}
.couple-box .van-dropdown-menu__bar {
	box-shadow: none;
}
.couple-box .van-cell__left-icon {
	line-height: 0.92rem;
	font-size: 0.32rem;
}
.couple-box .van-field__label {
	font-size: 0.32rem;
	font-weight: 500;
	color: #000;
	font-family: PingFangSC, PingFangSC-Medium;
}
.couple-box .van-cell {
	line-height: 0.92rem;
}
.couple-box .jobContent .van-cell {
	line-height: 0.5rem;
}
.couple-box .van-cell__value {
	font-size: 0.28rem;
	font-family: PingFangSC, PingFangSC-Regular;
	font-weight: 400;
	text-align: right;
	color: #e3e3e3;
}
.couple-box .van-field__control {
	text-align: end;
}
.couple-box .jobContent .van-field__control {
	text-align: left;
}
.couple-box .van-dropdown-menu__item {
	justify-content: flex-end;
}
</style>
<style lang="scss" scoped>
.couple-box {
	.picTitle {
		text-align: left;
		padding: 0.1rem;
		padding-left: 0.3rem;
		line-height: 0.96rem;
		height: 0.96rem;
		font-size: 0.32rem;
		font-weight: 500;
		color: #000;
		font-family: PingFangSC, PingFangSC-Medium;
	}
	.picTitle1 {
		text-align: left;
		padding-left: 0.1rem;
		padding-left: 0.3rem;
		line-height: 0.96rem;
		height: 0.96rem;
		font-size: 0.32rem;
		font-weight: 500;
		color: #000;
		font-family: PingFangSC, PingFangSC-Medium;
	}
	.bottomBtn {
		width: 92%;
		height: 1rem;
		line-height: 1rem;
		margin: 1rem auto;
		margin-bottom: 0.3rem;
		background: #3296fa;
		color: #fff;
		font-size: 0.4rem;
		text-align: center;
		border-radius: 0.1rem;
	}
	.empty {
		height: 2rem;
	}
	.daigo {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.3);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		.content {
			width: 6rem;
			height: 3.32rem;
			background: #fff;
			margin: 0 auto;
			margin-top: 4.7rem;
			.tCon {
				width: 3.69rem;
				height: 0.9rem;
				margin: 0 auto;
				padding-top: 0.6rem;
				padding-bottom: 0.9rem;
				font-size: 0.32rem;
				text-align: center;
				line-height: 0.45rem;
				font-weight: 600;
			}
			.tBtn {
				width: 3.69rem;
				display: flex;
				margin: 0 auto;
				justify-content: space-between;
				color: #fff;
				.tbtn1 {
					width: 1.6rem;
					line-height: 0.6rem;
					text-align: center;
					color: #409eff;
					border: 1px solid #409eff;
					border-radius: 0.4rem;
				}
				.tbtn2 {
					width: 1.6rem;
					line-height: 0.6rem;
					text-align: center;
					border-radius: 0.4rem;
					background: #409eff;
				}
			}
		}
	}
}
</style>


